@import (reference) 'config';
@import (reference) '../../../app/less/typography';

w-seed-read, w-seed-write {
  display: block;

  .seed-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 15px 10px;
    border: 1px dashed @color-disabled-200;
    border-radius: @border-radius;
    background-color: @color-white;
    box-sizing: border-box;
    user-select: none;

    &.seed-confirmed {
      .seed-item {
        cursor: default;
      }
    }
  }

  &[type="read"] {
    .seed-container {
      padding: 25px 12px;
    }

    .seed-item {
      line-height: 1;
      color: @color-basic-900;
      padding: 5px 8px;
      font-weight: 500;
    }
  }

  &[type="random"] {
    user-select: none;

    .seed-container {
      background-color: transparent;
      border: none;
      padding: 10px 5px;
    }

    .seed-item {
      border-radius: @border-radius;
      background-color: @color-submit-400;
      font-weight: 500;
      margin: 3px;
      border: solid 1px @color-submit-400;
      cursor: pointer;
      color: @white-only;
      line-height: 34px;
      padding: 0 15px;
      transition: background-color 0.3s;

      &:hover {
        background-color: @color-submit-500;
      }

      &.moved {
        border: dashed 1px @color-basic-200;
        background-color: transparent;
        color: transparent;
        cursor: default;
      }
    }
  }
}

w-seed-write {
  user-select: none;

  .seed-container {
    height: 158px;
    padding: 15px 5px;
    position: relative;
  }

  .seed-item {
    border-radius: @border-radius;
    padding: 0 15px;
    margin: 3px;
    font-weight: 500;
    background-color: @color-submit-50;
    cursor: pointer;
    line-height: 36px;
    font-weight: 500;
    max-height: 36px;
    color: @color-submit-400;
    transition: background-color 0.3s;

    &:hover {
      background-color: @color-submit-100;
    }
  }

  &.seed-error {
    .seed-container {
      border-color: @color-error-500;
    }
  }
}

@media screen and (max-width: 480px) {
  w-seed-write .seed-container {
    min-height: 224px;
    height: auto;
  }
}